<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport">
		<meta content="ie=edge" http-equiv="X-UA-Compatible">
		<title>Document</title>
		<script src="js/vue.js"></script>
		<style>
			* {
				box-sizing: border-box;
				margin: 0;
				padding: 0;
				font-family: Helvetica, sans-serif;
			}
			body,
			html {
				background-color: #F4F6FA;
			}
			ul {
				list-style: none;
			}
			a {
				text-decoration: none;
			}
			#app {
				width: 100%;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
			}
			#site-headline {
				padding: 32px 32px;
				font-size: 25px;
				font-weight: 600;
				text-align: center;
				color: #333;
			}
			.thead {
				width: 1200px;
				height: 60px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #fff;
				box-shadow: 5px 4px 30px rgba(0, 0, 0, 0.1);
				border-radius: 10px;
			}
			.thead .cell {
				font-weight: 600;
				font-size: 16px;
				color: #333;
				padding-left: 20px;
				text-align: left;
			}
			.thead li {
				flex: 1;
				text-align: center;
			}
			.thead li:last-child {
				color: #007BFF;
			}
			.shop-section {
				width: 1200px;
				background-color: #fff;
				border-radius: 10px;
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
				margin-top: 20px;
			}
			.row {
				display: flex;
				align-items: center;
				padding: 10px;
				border-bottom: 1px dashed #ddd;
			}
			.cell {
				padding: 10px;
				font-size: 13px;
				color: #333;
				flex: 1;
			}
			.cell.colspan-7 {
				flex: 7;
			}
			.cell.product-image img {
				width: 100%;
				height: auto;
			}
			.cell.price {
				color: red;
				font-size: 18px;
				font-weight: 600;
			}
			.cell.num button {
				width: 25px;
				height: 25px;
				color: #666;
				font-size: 22px;
				text-align: center;
				line-height: 25px;
				border: none;
			}
			.cell.num input {
				height: 24px;
				width: 48px;
				text-align: center;
				color: #555;
				font-size: 14px;
				border: 1px solid #ddd;
				position: relative;
				top: -4px;
				outline: none;
			}
			.cell span {
				color: #999;
				font-size: 13px;
			}
			.cell.edit {
				cursor: pointer;
				color: skyblue;
			}
			footer {
				width: 100%;
				height: 50px;
				line-height: 50px;
				position: fixed;
				bottom: 0;
				background-color: #fff;
				box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1);
				z-index: 1000;
				cursor: pointer;
			}
			footer .footer-content {
				width: 1200px;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.price {
				font-weight: 600;
				font-size: 18px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h2 id="site-headline">Vue购物车结算</h2>
			<ul class="thead">
				<li class="cell">
					<input type="checkbox" v-model="selectAll"> 全选
				</li>
				<li>单价（元）</li>
				<li>数量</li>
				<li>小计（元）</li>
				<li>编辑</li>
			</ul>
			<shop-section v-for="(shop, shopIndex) in shops" :key="shopIndex" :shop="shop" :shop-index="shopIndex"
				@delete-shop="deleteShop" @delete-product="deleteProduct" @increment-quantity="incrementQuantity"
				@decrement-quantity="decrementQuantity"></shop-section>
			<footer class="total-row">
				<ul class="footer-content">
					<li>
						<input type="checkbox" v-model="selectAll">全选
					</li>
					<li>
						<button @click="deleteSelectedProducts">删除选中商品</button>
					</li>
					<li>共有{{ totalItems }}件商品,已选择 <b>{{ selectedItems }}</b> 件</li>
					<li>
						合计：
						<span class="price" style="color: red">￥{{ totalPrice }}</span>
					</li>
					<li>
						<button @click="checkout">结账</button>
					</li>
				</ul>
			</footer>
		</div>
		<script src="js/shopcar.js"></script>
	</body>
</html>
